<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .list {
            column-count: 5;
            column-gap: 10px;
        }

        .list li {
            margin-bottom: 10px;
        }

        .list li img {
            width: 100%;
        }
    </style>
</head>

<body>

    <input class="search" type="text" value="牛仔裤" placeholder="输入关键词" />
    <button class="submit">搜索</button>

    <ul class="list">

    </ul>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
    let pcursorNum = '1703970033000', feedsList = [], filterList = [], intervalId = 0;
    
    axios.defaults.baseURL = 'http://127.0.0.1:8000/api/v1';
    axios.interceptors.response.use(response => response.data, error => Promise.reject(error));

    // 点击 搜索按钮 使用【视频预览图地址】进行 视频&文字的多模态搜索，
    // 会在后端进行 ai批量任务计算，接口返回 task_id
    $(".submit").click(async () => {
        let { task_id } = await axios.post('/ai/text_search_video', {
            keyWord: $(".search").val(),
            imgList: feedsList.map(v => v.photo.coverUrl)
        })
        checkTaskStatus(task_id)
    })

    // 使用 task_id 轮询，查询 任务计算 结果，如果为 true
    // 结束 轮询，根据后端返回的 搜索结果 index 下标集合从原始数据中，
    // 取出数据，存储 filterList 并渲染页面
    async function checkTaskStatus(task_id) {
        intervalId = setInterval(async () => {
            let { status, index } = await axios.get('/ai/task_status', {
                params: { task_id }
            });
            if (status) {
                clearInterval(intervalId)
                renderItem(index.map(v => feedsList[v]))
            }
        }, 3000)
    }

    async function getIndex() {
        let { feeds, pcursor } = await axios.get('/ks/like', {
            params: { pcursor: pcursorNum }
        })

        pcursorNum = pcursor
        feedsList = feeds
        renderItem(feedsList)
    }

    function renderItem(data) {
        $(".list").empty()
        data.forEach((v, i) => {
            $(".list").append(`
                <li>
                    <img src="${v.photo.coverUrl}" alt="">
                </li>
            `)
        });
    }

    getIndex()

</script>

</html>